<template>
  <div class="code padding">
    <el-row>
      <el-col :span="10" class="padding-right" >
        <div class="flex-box" style="height: 90vh;">
          <div class="flex-header">
            <h5>代码生成器</h5>
          </div>
          <div class="flex-body">
            <div>
              <small>数据模型：</small>
              <textarea style="width: 100%; box-sizing: border-box;"
                        class="textarea code margin-bottom scroll" rows="24"
                        v-model="content" placeholder=""></textarea>
            </div>

            <el-button @click="entity">Entity</el-button>
            <el-button @click="mapper">Mapper</el-button>
            <el-button @click="mybatis">Mybatis</el-button>
            <el-button @click="service">Service</el-button>
            <el-button @click="controller">Controller</el-button>
            <el-button @click="toForm">Form</el-button>


            <div class="margin-bottom"></div>

            <el-button @click="toJson">Json</el-button>
            <el-button @click="toRule">Rule</el-button>

            <div style="margin-bottom: 32px;"></div>

            <el-button @click="format">Format</el-button>

            <div class="margin-bottom"></div>

            <blockquote class="blockquote-info">
              <p>在左侧输入框填入表格配置信息</p>
              <p>
                <span>表结构分析库：</span>
                <a href="https://gitee.com/seaboot/flake" target="_blank">commons-flake</a>
              </p>
            </blockquote>
          </div>
        </div>
      </el-col>
      <el-col :span="14">
        <sea-code :title="title" :text="code" :type="type" style="height: 90vh;"></sea-code>
      </el-col>
    </el-row>
    <br/>
  </div>
</template>

<script setup>
import {ref} from "vue";
import example from "@/lang/tpl/model";
import reverse from "@/lang/tpl/reverse";

// 当前操作的代码分组
const content = ref('');

// 标题
const title = ref('model');


// 代码
const code = ref('code');

// 文本
const type = ref('json');

content.value = JSON.stringify(example, null, 4);

code.value = content.value;

const format = () => {
  const val = JSON.parse(content.value);
  content.value = JSON.stringify(val, null, 4)
}

const entity = () => {
  const val = JSON.parse(content.value);
  const ret = reverse.entity(val);

  title.value = 'entity';
  type.value = 'java';
  code.value = ret;
}

const mapper = () => {
  const val = JSON.parse(content.value);
  const ret = reverse.mapper(val);

  title.value = 'mapper';
  type.value = 'java';
  code.value = ret;
}

const service = () => {
  const val = JSON.parse(content.value);
  const ret = reverse.service(val);

  title.value = 'service';
  type.value = 'java';
  code.value = ret;
}

const controller = () => {
  const val = JSON.parse(content.value);
  const ret = reverse.controller(val);

  title.value = 'controller';
  type.value = 'java';
  code.value = ret;
}

const mybatis = () => {
  const val = JSON.parse(content.value);
  let ret = reverse.mybatis(val);

  title.value = 'mybatis';
  type.value = 'xml';
  code.value = ret;
}

const toJson = () => {
  const val = JSON.parse(content.value);
  let ret = reverse.json(val);

  title.value = 'json';
  type.value = 'js';
  code.value = ret;
}

const toForm = () => {
  const val = JSON.parse(content.value);
  let ret = reverse.form(val);

  title.value = 'form';
  type.value = 'html';
  code.value = ret;
}

const toRule = () => {
  const val = JSON.parse(content.value);
  let ret = reverse.rule(val);

  title.value = 'rules';
  type.value = 'json';
  code.value = ret;
}

</script>

<style scoped>
</style>
